<template>
  <div class="checkout-address">
    <div class="text">
      <div v-if="!showAddress" class="none">您需要先添加收货地址才可提交订单。</div>
      <ul v-else>
        <li><span>收<i />货<i />人：</span>{{ showAddress.receiver }}</li>
        <li><span>联系方式：</span>{{ showAddress.contact }}</li>
        <li><span>收货地址：</span>{{ showAddress.fullLocation }}{{ showAddress.address }}</li>
      </ul>
      <a @click="openAddressEdit(showAddress)" href="javascript:;">修改地址</a>
    </div>
    <div class="action">
      <XtxButton @click="openDialog" class="btn">切换地址</XtxButton>
      <XtxButton @click="openAddressEdit({})" class="btn">添加地址</XtxButton>
    </div>
    <!-- 地址栏切换模态框 -->
    <XtxDialog v-model:visible="visibleDialog" title="切换收货地址">
      <div class="text item" @click="selecteAddress = item"
        :class="{ active: selecteAddress && selecteAddress.id == item.id }" v-for="item in list" :key="item.id">
        <ul>
          <li><span>收<i />货<i />人：</span>{{ item.receiver }}</li>
          <li><span>联系方式：</span>{{ item.contact }}</li>
          <li><span>收货地址：</span>{{ item.fullLocation.replace(/ /g, '') + item.address }}</li>
        </ul>
      </div>
      <template #footer>
        <XtxButton @click="visibleDialog = false" type="gray" style="margin-right:20px">取消</XtxButton>
        <XtxButton @click="vonfirmAddressFn" type="primary">确认</XtxButton>
      </template>
    </XtxDialog>
    <!-- 添加地址  及  修改地址 -->
    <AddressEdit @on-success="successHandler" ref="addressEdit"></AddressEdit>
  </div>
</template>
<script>
import { ref } from 'vue'
import AddressEdit from './address-edit.vue'
export default {
  name: 'CheckoutAddress',
  components: {
    AddressEdit
  },
  props: {
    //收获地址列表
    list: {
      type: Array,
      default: []
    }
  },
  setup(props, { emit }) {
    //定义展示地址的值
    const showAddress = ref(null)

    //查找出默认地址
    const defaultAddress = props.list.find(item => item.isDefault === 0)

    //1.有默认地址 展示默认地址
    if (defaultAddress) {
      showAddress.value = defaultAddress
    } else {
      //2.有地址 但没有默认地址  取第一个地址展示
      showAddress.value = props.list.length = 0 ? false : props.list[0]
    }

    //控制XtxDialog组件的显示与隐藏
    const visibleDialog = ref(false)


    //默认通知父组件 默认的收获地址的ID
    emit('change', showAddress.value && showAddress.value.id)

    //选中的地址信息
    const selecteAddress = ref(null)

    //点击确定将选择的地址赋值给展示的地址的值
    const vonfirmAddressFn = () => {
      showAddress.value = selecteAddress.value
      visibleDialog.value = false
      //提交地址id给结算组件
      emit('change', selecteAddress.value?.id)
      //选择完毕清空选中地址的记录
      selecteAddress.value = null
    }
    //点击切换
    const openDialog = () => {
      visibleDialog.value = true
      //选择完毕清空选中地址的记录
      selecteAddress.value = null
    }

    //向地址列表中添加地址
    const successHandler = (formData) => {
      //根据formData.id查找地址列表中有没有该id 有则是修改地址 没有则是添加地址
      const address = props.list.find(item => {
        return item.id == formData.id
      })

      if (address) {
        //如果存在修改地址
        for(const key in address) {
          address[key] = formData[key]
        }
      } else {
        //不存在添加地址
        //深拷贝 添加收货地址
        const deepFormData = JSON.parse(JSON.stringify(formData))
        props.list.unshift(deepFormData)
      }


    }

    //打开添加地址的对话框 
    const addressEdit = ref(null)
    const openAddressEdit = (value) => {
      addressEdit.value.open(value)
    }

    return {
      showAddress,
      visibleDialog,
      selecteAddress,
      vonfirmAddressFn,
      openDialog,
      openAddressEdit,
      addressEdit,
      successHandler
    }
  }
}
</script>
<style scoped lang="less">
.checkout-address {
  border: 1px solid #f5f5f5;
  display: flex;
  align-items: center;

  .text {
    flex: 1;
    min-height: 90px;
    display: flex;
    align-items: center;

    &.item {
      border: 1px solid #f5f5f5;
      margin-bottom: 10px;
      cursor: pointer;

      &.active,
      &:hover {
        border-color: @xtxColor;
        background: lighten(@xtxColor, 50%);
      }

      >ul {
        padding: 10px;
        font-size: 14px;
        line-height: 30px;
      }
    }

    .none {
      line-height: 90px;
      color: #999;
      text-align: center;
      width: 100%;
    }

    >ul {
      flex: 1;
      padding: 20px;

      li {
        line-height: 30px;

        span {
          color: #999;
          margin-right: 5px;

          >i {
            width: 0.5em;
            display: inline-block;
          }
        }
      }
    }

    >a {
      color: @xtxColor;
      width: 160px;
      text-align: center;
      height: 90px;
      line-height: 90px;
      border-right: 1px solid #f5f5f5;
    }
  }

  .action {
    width: 420px;
    text-align: center;

    .btn {
      width: 140px;
      height: 46px;
      line-height: 44px;
      font-size: 14px;

      &:first-child {
        margin-right: 10px;
      }
    }
  }
}
</style>